import React from 'react'
import injectSheet from 'react-jss'
import styles from './styles'
import { Layout, Tag, } from 'antd'
// import { HEADERHEIGHT, } from '@/script/config'
const { Header, Content, Footer, } = Layout

class Main extends React.Component {
  render() {
    const { classes } = this.props
    return (
      <Layout>
        <Header className={classes.AppHeader}>
          <div className={classes.Logo}>博客页面</div>
        </Header>
        <Layout className={classes.AppBody}>
          <Content className={classes.AppContent}>
            <ul className={classes.CardContainer}>
              {
                list.map((item, index) => {
                  return (
                    <li
                      className={classes.Card}
                      key={index}>
                      <div className={classes.Content}>
                        <div className={classes.TitleContent}>
                          <a className={classes.Title}>{item.title}</a>
                        </div>
                        <div className={classes.InfoRow}>
                          <ul className={classes.MetaList}>
                            <li className={`${classes.Item} Category`}><Tag color="#2db7f5">{item.label.text}</Tag></li>
                            <li className={`${classes.Item}  UserName`}><div>{item.author}</div></li>
                            <li className={classes.Item}>{item.createTime}</li>
                            <li className={classes.Item}>{item.readCount} 次阅读</li>
                          </ul>
                        </div>
                      </div>
                    </li>
                  )
                })
              }
            </ul>
          </Content>
        </Layout>
        <Footer style={{ textAlign: 'center' }}>
          Defore Blog ©2016 Created by Defore
        </Footer>
      </Layout>
    )
  }
}

const list = [
  { id: 1, title: '轻轻松松实现数字滚动效果', label: { type: 'android', text: 'android' }, createTime: '3天前', author: 'a菌', readCount: 178, },
  { id: 2, title: '面试官: 实现双向绑定Proxy比defineproperty优劣如何?', label: { type: 'frontend', text: '前端' }, createTime: '7天前', author: 'bug菌', readCount: 10, },
  { id: 3, title: '轻轻松松实现数字滚动效果', label: { type: 'ios', text: 'ios' }, createTime: '1小时前', author: 'cc', readCount: 33, },
  // { id: 4, title: '4444' },
  // { id: 5, title: '55' },
  // { id: 6, title: '6666666' },
  // { id: 7, title: '77' },
  // { id: 8, title: '8' },
]

export default injectSheet(styles)(Main)
